<template>
  <div class="subject">
    <el-card>
      <el-form :inline="true" :model="form">
        <el-form-item label="学科编号">
          <el-input v-model="form.rid"></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择状态" v-model="form.status">
            <el-option label="禁用" :value="0"></el-option>
            <el-option label="启用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="$route.meta.rules.includes($store.state.role)">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="add" v-if="$store.state.role != '学生'">+新增学科</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card2">
      <el-table :data="tableData">
        <el-table-column label="序号" width="150px">
          <!-- （当前页-1）* 每页条数 + 序号 + 1 -->
          <template
            slot-scope="scope"
          >{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="学科编号" prop="rid"></el-table-column>
        <el-table-column label="学科名称" prop="name"></el-table-column>
        <el-table-column label="简称" prop="short_name"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="create_time"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span :class="{red: scope.row.status == 0}">{{scope.row.status == 1 ? '启用' : '禁用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="!$store.state.role.includes('学生')">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="setStatus(scope.row.id)">{{scope.row.status == 0 ? '启用' : '禁用'}}</el-button>
            <el-button type="text" @click="deleteClick(scope.row.id)" v-if="$store.state.role.includes('管理员')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.totalPage"
      ></el-pagination>
    </el-card>

    <addSubject ref="addSubject" :mode="mode"></addSubject>
  </div>
</template>

<script>
import { getTableData, delSubject, updateStatus } from "@/api/subject.js";
import addSubject from '@/views/home/subject/addSubject.vue'
export default {
  components: {
    addSubject
  },

  data() {
    return {
      mode: 'add',
      form: {
        rid: "",
        name: "",
        username: "",
        status: ""
      },
      // 表格数据
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 2,
        totalPage: 10
      }
    };
  },

  created() {
    this.getData();
  },

  methods: {
    handleSizeChange(size) {
      // console.log("每页" + size + "条");
      this.pagination.pageSize = size;
      this.pagination.currentPage = 1;
      this.getData();
    },

    handleCurrentChange(page) {
      // console.log("当前页:" + page);
      // 当页码改变时，刷新数据
      this.pagination.currentPage = page;
      this.getData();
    },

    getData() {
      getTableData({
        page: this.pagination.currentPage,
        limit: this.pagination.pageSize,
        ...this.form
      }).then(res => {
        // console.log("学科列表", res);
        this.tableData = res.data.items;
        this.pagination.totalPage = res.data.pagination.total;
      });
    },

    // 搜索事件
    search() {
      this.pagination.currentPage = 1;
      this.getData();
    },

    // 清除事件
    reset() {
      this.form = {
        rid: "",
        name: "",
        username: "",
        status: ""
      };
      this.search();
    },

    // 删除
    deleteClick(id) {
      // 弹出提示框
      this.$confirm("集美，emmmmm确定删除此条数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delSubject({ id }).then(() => {
            // console.log(res);
            this.$message.success("数据删除成功");
            // 刷新数据
            this.search();
          });
        })
        .catch(() => {});
    },

    // 点击修改状态
    setStatus(id){
      updateStatus({id}).then(() => {
        // console.log(res);
        this.$message.success('修改状态成功')
        this.search()
      })
    },
    
    // 新增
    add() {
      this.mode = 'add'
      this.$refs.addSubject.dialogFormVisible = true
      // 将表单数据清空
      this.$refs.addSubject.form = {
        rid: "",
        name: "",
        short_name: "",
        intro: "",
        remark: ""
      }
    },

    // 编辑
    edit(row){
      this.mode = 'edit'
      // 将数据深拷贝
      this.$refs.addSubject.form = JSON.parse(JSON.stringify(row))
      // 打开弹框
      this.$refs.addSubject.dialogFormVisible = true
    }
  }
};
</script>

<style lang="less">
.subject {
  .card2 {
    margin-top: 20px;
  }

  .red {
    color: #f00;
  }

  .pagination {
    text-align: center;
    margin-top: 30px;
  }
}
</style>